import React from 'react';
import { ConfigProvider, Space } from 'antd';
import { Button } from '../index';
import type { ButtonComponentToken } from '../style/config';

/**
 * 自定义 Button 主题示例
 * 通过 ConfigProvider 的 theme.components.Button 配置
 */

// 方法 1: 直接定义配置对象
const customButtonTheme: ButtonComponentToken = {
  fontWeight: 600,
  iconGap: 12,
  primaryColor: '#ffffff',
  defaultFontSize: 16,
  defaultBg: '#f0f0f0',
  defaultBorderColor: '#d9d9d9',
};

// 方法 2: 基于 GlobalToken 动态计算（演示用）
const getDynamicButtonTheme = (): ButtonComponentToken => {
  return {
    fontWeight: 700,
    primaryColor: '#fff',
    primaryShadow: '0 4px 8px rgba(255, 0, 0, 0.2)',
    defaultFontSize: 18,
    largeFontSize: 20,
    smallFontSize: 14,
  };
};

const App: React.FC = () => {
  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      {/* 默认样式 */}
      <div>
        <h3>默认样式</h3>
        <Space>
          <Button type="default">Default</Button>
          <Button type="primary">Primary</Button>
          <Button type="primary" danger>Danger</Button>
          <Button type="text">Text</Button>
        </Space>
      </div>

      {/* 方法 1: 使用自定义主题对象 */}
      <div>
        <h3>方法 1: 自定义主题对象</h3>
        <ConfigProvider
          theme={{
            components: {
              // @ts-ignore - antd 的类型定义可能不包含自定义组件
              Button: customButtonTheme,
            },
          }}
        >
          <Space>
            <Button type="default">Default</Button>
            <Button type="primary">Primary</Button>
            <Button type="primary" danger>Danger</Button>
            <Button type="text">Text</Button>
          </Space>
        </ConfigProvider>
      </div>

      {/* 方法 2: 使用动态计算的主题 */}
      <div>
        <h3>方法 2: 动态计算主题</h3>
        <ConfigProvider
          theme={{
            components: {
              // @ts-ignore
              Button: getDynamicButtonTheme(),
            },
          }}
        >
          <Space>
            <Button type="default">Default</Button>
            <Button type="primary">Primary</Button>
            <Button size="large">Large</Button>
            <Button size="small">Small</Button>
          </Space>
        </ConfigProvider>
      </div>

      {/* 方法 3: 内联配置 */}
      <div>
        <h3>方法 3: 内联配置</h3>
        <ConfigProvider
          theme={{
            components: {
              // @ts-ignore
              Button: {
                fontWeight: 500,
                defaultColor: '#1890ff',
                defaultBorderColor: '#1890ff',
                primaryColor: '#fff',
                iconGap: 8,
              },
            },
          }}
        >
          <Space>
            <Button type="default">Custom Border</Button>
            <Button type="primary">Custom Primary</Button>
          </Space>
        </ConfigProvider>
      </div>

      {/* 方法 4: 嵌套主题 */}
      <div>
        <h3>方法 4: 嵌套主题</h3>
        <ConfigProvider
          theme={{
            components: {
              // @ts-ignore
              Button: {
                fontWeight: 400,
                defaultBg: '#e6f7ff',
              },
            },
          }}
        >
          <Space>
            <Button type="default">外层主题</Button>
            
            <ConfigProvider
              theme={{
                components: {
                  // @ts-ignore
                  Button: {
                    fontWeight: 700,
                    defaultBg: '#fff1f0',
                    defaultBorderColor: '#ff4d4f',
                  },
                },
              }}
            >
              <Button type="default">内层主题</Button>
            </ConfigProvider>
          </Space>
        </ConfigProvider>
      </div>
    </Space>
  );
};

export default App;

